import React, { useState } from 'react'
import { Link, Outlet, useNavigate } from 'react-router-dom'
export default function Message() {
    const [message] = useState([
        { id: '001', title: 'message 1', describe: 'asdlflasdlflsad1' },
        { id: '002', title: 'message 2', describe: 'asdlflasdlflsad2' },
        { id: '003', title: 'message 3', describe: 'asdlflasdlflsad3' },
        { id: '004', title: 'message 4', describe: 'asdlflasdlflsad4' },
        { id: '005', title: 'message 5', describe: 'asdlflasdlflsad5' },
    ])
    function gotoDetail(m){
        console.log('this.is.detail')
        goto('detail',{
            replace:false,
            state:{id:m.id,title:m.title,describe:m.describe}
        })
    }
    const goto = useNavigate()
    return (
        <div>
            <ul>
                {
                    message.map((e) => {
                        return (
                            <li key={e.id}>
                                <Link 
                                    to='detail' 
                                    state={{
                                        id:e.id,
                                        title:e.title,
                                        describe:e.describe
                                    }}
                                >{e.title}</Link> <button onClick={()=>gotoDetail(e)}>goto detail </button>
                            </li>
                        )
                    })
                }

            </ul>
            <Outlet/>
        </div>

    )
}
